<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get</title>
</head>
<body>
<form>
    <input type="text" name="username" id="" placeholder="请输入用户名">
    <input type="password" name="password" id="" placeholder="请输入密码">
    <input type="button" value="提交">
    <h1>我是默认文本，等待ajax兄弟的好消息</h1>
</form>
<script>
    // http协议一共三部分组成
    // 请求：
    // 1.请求行 get http://locahost/user?key=value&key=value http/1.1
    // 2.请求头 get不需要设置请求头，post需要设置Content-Type:applicate/x-www-form
    // 3.请求体 post需要发送数据，get的数据在请求行，所以请求体发送为空即可
    // 响应：
    // 1.响应行
    // 2.响应头
    // 3.响应体（响应内容）
    let btn = document.querySelector('input[type="button"]');
    btn.onclick = function () {
        // ajax的原生方法 是用js写的(别人问你要知道，熟悉，知道关键词能找到原生写法的文档)
        // 创建一个XMLHttpRequest对象,使用他的open进行发送一个请求
        let xhr = new XMLHttpRequest();
        // XMLHttpRequest的open方法，第一个参数：请求方法 第二个参数：
        // 请求地址如果是get方式要发送的格式也写在这里，第三个参数是同步还是异步默认是
        // 异步，设置为true是异步，false是同步
        xhr.open('get', "/user?username=zhangsan&password=123456", true);
        // 使用XMLHttpRequest的setRequestHeader设置请求头，第一个参数要设置的键
        // 第二个参数要设置键的值
        // get不需要设置发送内容类型的编码格式
        // xhr.setRequestHeader('Content-Type', 'applicate/x-www-form');
        // console.log(xhr.readyState);
        // XMLHttpRequest创建时readyStare记录了创建到结束的状态
        // 每个阶段都会变化从0-4 4接收响应完成
        // get方式设置为空即可
        xhr.send(null);
        // 监听并处理响应
        xhr.onreadystatechange = function () {
            if(xhr.status == 200 && xhr.readyState == 4) {
                document.querySelector('h1').innerHTML = xhr.responseText;
            }
        }
        // status是一个状态码
    }
</script>
</body>
</html>